<script setup lang="ts">
import {
  House,
  Service,
  User,
  ArrowLeft,
  ArrowRight,
  InfoFilled,
  SuccessFilled,
  WarningFilled, CircleCloseFilled
} from "@element-plus/icons-vue";
import appStore from "@/store";
import {createInterview} from "@/http/m_api/interview";
import {storeToRefs} from "pinia";
import {ElMessage} from "element-plus";
import {cloneDeep} from "lodash";
import {MESSAGE_JSON} from "@/schema/interview";
import {trimString} from "@/assets/ts/utils";
import {closeGlobalLoading, openGlobalLoading} from "@/utils/common";

const {AttachSetting, CheckSetting, PushMessage} = appStore.useInterviewJsonStore;
const {interviewNewStore} = storeToRefs(appStore.useInterviewJsonStore);

// Animation and UI state
const fadeIn = ref(false);
const currentStep = ref(1);

onMounted(async () => {
  let item = localStorage.getItem("interview-setting");
  if (item) AttachSetting(JSON.parse(item));

  // Trigger fade-in animation
  setTimeout(() => {
    fadeIn.value = true;
  }, 100);
});

const route = useRoute();
const dialogVisible = ref(false);
const msg_lst = ref();
const msg_foot = ref();

// Menu items configuration
const menuItems = [
  {
    index: 'requirement',
    route: '/interview/setting/requirement',
    icon: House,
    title: '需求设置',
    description: '设置面试岗位和要求'
  },
  {
    index: 'service',
    route: '/interview/setting/service',
    icon: Service,
    title: '服务设置',
    description: '配置面试服务参数'
  },
  {
    index: 'privacy',
    route: '/interview/setting/privacy',
    icon: User,
    title: '隐私设置',
    description: '管理权限和隐私选项'
  }
];

const activeMenuItem = computed(() => {
  const currentPath = route.path.split('/').filter(Boolean).pop();
  return menuItems.find(item => item.index === currentPath) || menuItems[0];
});

const next = () => {
  msg_lst.value = CheckSetting();
  msg_foot.value = msg_lst.value.messages.pop();
  dialogVisible.value = true;
};

const getMessageIcon = (type: string) => {
  switch (type) {
    case 'danger':
      return CircleCloseFilled;
    case 'warning':
      return WarningFilled;
    case 'already':
      return SuccessFilled;
    default:
      return InfoFilled;
  }
};

const getMessageClass = (type: string) => {
  switch (type) {
    case 'title':
      return 'message-title';
    case 'danger':
      return 'message-danger';
    case 'warning':
      return 'message-warning';
    case 'already':
      return 'message-success';
    default:
      return 'message-info';
  }
};

const router = useRouter();
const loading = ref(false);

const finish = async () => {
  loading.value = true;
  dialogVisible.value = false;
  ElMessage.info({message: '正在准备中, 请勿刷新页面...', duration: 5000});
  interviewNewStore.value.Messages = [];
  openGlobalLoading();
  const body = {
    resumeId: interviewNewStore.value.Settings.resumeId,
    company: interviewNewStore.value.Settings.company,
    post: interviewNewStore.value.Settings.post,
    requirement: interviewNewStore.value.Settings.requirement,
    interviewType: interviewNewStore.value.Settings.interviewType,
    cameraPermit: interviewNewStore.value.Settings.cameraPermit,
    microphonePermit: interviewNewStore.value.Settings.microphonePermit,
    generateReport: true,
    reportName: interviewNewStore.value.Settings.reportName,
    modelChoice: interviewNewStore.value.Settings.model_choice,
    voiceSpeed: interviewNewStore.value.Settings.voice_speed,
    hoyoModelName: interviewNewStore.value.Settings.hoyo_model_name,
    universalSpeakerName: interviewNewStore.value.Settings.universal_speaker_name,
    minDialogueRounds: interviewNewStore.value.Settings.minDialogueRounds
  };

  const data = await createInterview(body);
  if (data.data) {
    interviewNewStore.value.id = data.data.id;
    interviewNewStore.value.startTime = new Date(data.data.startTime);
    interviewNewStore.value.status = data.data.status;
    let message = cloneDeep(MESSAGE_JSON);
    message.id = interviewNewStore.value.Messages.length;
    message.content = trimString(data.data.firstMessage);
    PushMessage(message);
    loading.value = false;
    router.push('/interview/main');
    closeGlobalLoading();
  } else {
    ElMessage({type: 'error', message: '出现错误，请稍后再试'});
  }
};

const changeSelecting = (index: string) => {
  const selectedItem = menuItems.find(item => item.index === index);
  if (selectedItem) {
    currentStep.value = menuItems.indexOf(selectedItem) + 1;
  }
};
</script>

<template>
  <!-- Enhanced Confirmation Dialog -->
  <el-dialog
      v-model="dialogVisible"
      width="700px"
      class="confirmation-dialog"
      :show-close="false"
      top="10px"

      style="border-radius: 10px"
  >
    <template #header>
      <div class="dialog-header">
        <el-icon class="dialog-icon">
          <InfoFilled/>
        </el-icon>
        <h2 class="dialog-title">确认设置</h2>
      </div>
    </template>

    <div class="dialog-content">
      <div class="messages-container">
        <div v-for="(item, index) in msg_lst?.messages" :key="index" class="message-item">
          <div :class="['message-content', getMessageClass(item.type)]">
            <el-icon v-if="item.type !== 'title'" class="message-icon">
              <component :is="getMessageIcon(item.type)"/>
            </el-icon>
            <div class="message-text">
              <span v-if="item.type === 'danger'" class="message-prefix">错误：</span>
              <span v-else-if="item.type === 'warning'" class="message-prefix">警告：</span>
              <span v-else-if="item.type === 'content'" class="message-prefix">提示：</span>
              {{ item.message }}
            </div>
          </div>
          <el-divider v-if="item.type === 'title'" class="title-divider"/>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <div :class="['footer-message', getMessageClass(msg_lst?.accept)]">
          <el-icon class="footer-icon">
            <component :is="getMessageIcon(msg_lst?.accept)"/>
          </el-icon>
          {{ msg_foot?.message }}
        </div>
        <div class="footer-actions">
          <el-button type="info" @click="dialogVisible = false" class="action-button">
            <el-icon>
              <ArrowLeft/>
            </el-icon>
            返回修改
          </el-button>
          <el-button
              v-if="msg_lst?.accept === 'warning'"
              type="warning"
              @click="finish"
              class="action-button"
          >
            <el-icon>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                <path
                    d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
                <path
                    d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
              </svg>
            </el-icon>
            确认继续
          </el-button>
          <el-button
              v-else-if="msg_lst?.accept === 'already'"
              type="success"
              @click="finish"
              class="action-button"
          >
            <el-icon>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   class="bi bi-check-circle" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                <path
                    d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
              </svg>
            </el-icon>
            开始面试
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>

  <!-- Main Container -->
  <div class="interview-settings-container" :class="{ 'fade-in': fadeIn }">
    <!-- Header -->
    <div class="page-header">
      <h1 class="page-title">面试设置</h1>
    </div>

    <!-- Main Content -->
    <div class="main-content" v-show="!loading">
      <div class="settings-card">
        <!-- Sidebar Navigation -->
        <div class="sidebar">
          <div class="sidebar-header">
            <h3>设置选项</h3>
          </div>
          <el-menu
              router
              :default-active="route.path.split('/').filter(Boolean).pop()"
              class="settings-menu"
              @select="changeSelecting"
          >
            <el-menu-item
                v-for="(item, index) in menuItems"
                :key="item.index"
                :index="item.index"
                :route="item.route"
                class="menu-item"
            >
              <div class="menu-item-content">
                <el-icon class="menu-icon">
                  <component :is="item.icon"/>
                </el-icon>
                <div class="menu-text">
                  <span class="menu-title">{{ item.title }}</span>
                  <span class="menu-desc">{{ item.description }}</span>
                </div>
              </div>
            </el-menu-item>
          </el-menu>
        </div>

        <!-- Content Area -->
        <div class="content-area">
          <div class="router-content">
            <router-view/>
          </div>
        </div>
      </div>
    </div>

    <!-- Loading State -->
    <div v-show="loading" class="loading-container">
      <div class="loading-content">
        <el-icon class="loading-icon"><i class="el-icon-loading"></i></el-icon>
        <h3 class="loading-title">正在准备面试环境</h3>
        <p class="loading-desc">请稍等片刻，系统正在为您配置最佳的面试体验...</p>
      </div>
    </div>

    <!-- Footer Actions -->
    <div class="page-footer" v-show="!loading">
      <div class="footer-content">
        <el-button
            type="info"
            @click="$router.push('/interview/reqChoose')"
            class="nav-button prev-button"
        >
          <el-icon>
            <ArrowLeft/>
          </el-icon>
          上一步
        </el-button>
        <el-button
            type="primary"
            @click="next"
            class="nav-button next-button"
        >
          下一步
          <el-icon>
            <ArrowRight/>
          </el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

.interview-settings-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  max-height: 100vh;
  padding: 0 20px;
  font-family: 'Noto Sans SC', sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  &.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header {
  text-align: center;
  padding: 20px 0;

  .page-title {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .progress-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    .step-indicator {
      display: flex;
      align-items: baseline;
      gap: 2px;
      font-weight: 600;

      .step-number {
        font-size: 24px;
        color: #409eff;
      }

      .step-total {
        font-size: 16px;
        color: #909399;
      }
    }

    .step-description {
      font-size: 14px;
      color: #606266;
    }
  }
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
}

.settings-card {
  width: 100%;
  max-width: 1200px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  height: 625px;
}

.sidebar {
  width: 280px;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;

  .sidebar-header {
    padding: 25px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    h3 {
      color: white;
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
  }

  .settings-menu {
    flex: 1;
    background: transparent;
    border: none;

    :deep(.el-menu-item) {
      height: auto;
      padding: 0;
      margin: 8px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
      }

      &.is-active {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        .menu-item-content {
          .menu-icon {
            color: #ffffff;
          }

          .menu-title {
            color: #ffffff;
            font-weight: 600;
          }

          .menu-desc {
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }
    }

    .menu-item-content {
      display: flex;
      align-items: center;
      padding: 16px;
      gap: 12px;

      .menu-icon {
        font-size: 20px;
        color: rgba(255, 255, 255, 0.8);
        transition: color 0.3s ease;
      }

      .menu-text {
        display: flex;
        flex-direction: column;
        gap: 2px;

        .menu-title {
          font-size: 15px;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.9);
          transition: all 0.3s ease;
        }

        .menu-desc {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          line-height: 1.3;
          transition: color 0.3s ease;
        }
      }
    }
  }
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;

  .content-header {
    padding: 25px 30px;
    border-bottom: 1px solid #ebeef5;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

    .content-title {
      font-size: 24px;
      font-weight: 700;
      color: #2c3e50;
      margin: 0 0 8px;
    }

    .content-description {
      font-size: 14px;
      color: #64748b;
      margin: 0;
    }
  }

  .router-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background: #ffffff;
  }
}

.loading-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  margin: 0 auto;
  max-width: 1200px;

  .loading-content {
    text-align: center;
    padding: 40px;

    .loading-icon {
      font-size: 48px;
      color: #409eff;
      margin-bottom: 20px;
      animation: spin 2s linear infinite;
    }

    .loading-title {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 12px;
    }

    .loading-desc {
      font-size: 16px;
      color: #64748b;
      margin: 0;
      max-width: 400px;
    }
  }
}

.page-footer {
  padding: 20px 0;

  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;

    .nav-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      &.prev-button {
        background: linear-gradient(135deg, #64748b, #475569);
        border-color: #64748b;
        color: white;

        &:hover {
          background: linear-gradient(135deg, #475569, #334155);
        }
      }

      &.next-button {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        border-color: #3b82f6;

        &:hover {
          background: linear-gradient(135deg, #1d4ed8, #1e40af);
        }
      }
    }
  }
}

// Dialog Styles
.confirmation-dialog {


  :deep(.el-dialog__header) {
    padding: 0;
    margin: 0;
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }

  :deep(.el-dialog__footer) {
    padding: 0;
  }

  .dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 25px 30px;
    color: black;

    .dialog-icon {
      font-size: 24px;
    }

    .dialog-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
  }

  .dialog-content {
    padding: 25px 30px;

    .messages-container {
      max-height: 350px;
      overflow-y: auto;

      .message-item {
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .message-content {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.5;

        .message-icon {
          font-size: 16px;
          margin-top: 2px;
          flex-shrink: 0;
        }

        .message-text {
          flex: 1;

          .message-prefix {
            font-weight: 600;
          }
        }

        &.message-title {
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
          color: #2c3e50;
          border: 1px solid #e2e8f0;
        }

        &.message-danger {
          background: rgba(245, 108, 108, 0.1);
          border: 1px solid rgba(245, 108, 108, 0.3);
          color: #f56c6c;

          .message-icon {
            color: #f56c6c;
          }
        }

        &.message-warning {
          background: rgba(230, 162, 60, 0.1);
          border: 1px solid rgba(230, 162, 60, 0.3);
          color: #e6a23c;

          .message-icon {
            color: #e6a23c;
          }
        }

        &.message-success {
          background: rgba(103, 194, 58, 0.1);
          border: 1px solid rgba(103, 194, 58, 0.3);
          color: #67c23a;

          .message-icon {
            color: #67c23a;
          }
        }

        &.message-info {
          background: rgba(64, 158, 255, 0.1);
          border: 1px solid rgba(64, 158, 255, 0.3);
          color: #409eff;

          .message-icon {
            color: #409eff;
          }
        }
      }

      .title-divider {
        margin: 20px 0;
        border-color: #e2e8f0;
      }
    }
  }

  .dialog-footer {
    padding: 20px 30px;
    border-top: 1px solid #e2e8f0;

    .footer-message {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;

      .footer-icon {
        font-size: 16px;
      }
    }

    .footer-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;

      .action-button {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        font-weight: 500;
        border-radius: 6px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// Responsive Design
@media (max-width: 1024px) {
  .settings-card {
    flex-direction: column;
    max-width: 100%;

    .sidebar {
      width: 100%;

      .settings-menu {
        :deep(.el-menu-item) {
          margin: 4px 8px;

          .menu-item-content {
            padding: 12px;
          }
        }
      }
    }

    .content-area {
      .router-content {
        padding: 20px;
      }
    }
  }

  .page-footer {
    .footer-content {
      flex-direction: column;
      gap: 15px;

      .nav-button {
        width: 100%;
        justify-content: center;
      }
    }
  }
}

@media (max-width: 768px) {
  .interview-settings-container {
    padding: 0 15px;
  }

  .page-header {
    .page-title {
      font-size: 28px;
    }
  }

  .sidebar {
    .settings-menu {
      :deep(.el-menu-item) {
        .menu-item-content {
          .menu-text {
            .menu-desc {
              display: none;
            }
          }
        }
      }
    }
  }

  .confirmation-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 0 auto;
    }
  }
}
</style>